<template>
    <div class="inner-content add-content">
        <div class='title'>
            上传商品
        </div>
        <el-form :rules='rules' :model='form' ref="form" label-position="right">
              <el-form-item prop='brand'>
                  <el-select v-model="form.brand" placeholder="请选择品牌" @change='getAllNames'>
                      <el-option
                        v-for="item in brands"
                        :value="item">
                      </el-option>
                  </el-select>
              </el-form-item><el-form-item prop='name'>
                  <el-select v-model="form.name" placeholder="请选择商品名称" @change='getAllStandards'>
                      <el-option
                        v-for="item in names"
                        :value="item">
                      </el-option>
                  </el-select>
              </el-form-item><el-form-item prop='water'>
                   <el-select v-model="form.water"
                    placeholder="请选择商品规格">
                      <el-option
                        v-for="item in standards"
                        :label='item.standard'
                        :value="item">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item prop='quantity'>
                  <el-input v-model='form.quantity' placeholder='商品库存'></el-input>
              </el-form-item><span class='price'>商品售价{{proPrice}}元</span><el-button class='btn-l' type="primary" @click='submitPro("form")'>提交</el-button><el-button class='btn-l' @click='addNew'>自定义商品</el-button>
        </el-form>
        <el-dialog :title='dialog.title'
            v-model='dialog.show'
            class='dialog-form's
            :modal='dialog.modal'>
           <el-form :model='newProForm' :rules='cusRules' ref='newProForm' label-position='top' label-width='60px'>
              <el-form-item label='品牌' prop='brand' >
                  <el-input v-model='newProForm.brand' placeholder='请输入品牌名'></el-input>
              </el-form-item>

              <el-form-item label='商品名字' prop='name'>
                  <el-input v-model='newProForm.name' placeholder='请输入商品名称'></el-input>
              </el-form-item>

              <el-form-item label='商品售价' prop='prForWaSt' class='cusPrice'>
                  <el-input v-model='newProForm.prForWaSt' placeholder='请输入售价'></el-input><div class='unit'>元</div>
              </el-form-item>

              <el-form-item label='一次性用水' prop='disposable'>
                  <el-select placeholder='请选择' v-model='newProForm.disposable'>
                      <el-option label='是' :value='true'></el-option>
                      <el-option label='否' :value='false'></el-option>
                  </el-select>
              </el-form-item>

              <el-form-item label='商品规格' prop='standard'>
                  <input text='type'
                      class='cus-input'
                      style='width: 180px;'
                      placeholder='请选择'
                      v-model='newProForm.standard'
                      @click='getStanList'
                      @blur='onInputBlur("showStanList")'>
                  <ul class='list'  v-show='standards.length && showStanList'>
                      <li v-for='standard in standards'
                          @click='choseStandard(standard)'>
                          <p>{{standard}}</p>
                      </li>
                  </ul>
              </el-form-item>

              <el-form-item label='商品库存' prop='quantity'>
                  <el-input v-model.number='newProForm.quantity' placeholder='请输入库存'></el-input>
              </el-form-item>

              <el-form-item label='水厂（可选）'
                prop='waterFactoryName'
                class='large-input'
                style='display: block;'>
                  <input text='type'
                      class='cus-input'
                      placeholder='请选择水厂名称'
                      @keyup='getWorksList'
                      v-model='newProForm.waterFactoryName'
                      @click='onShowList("showWorkList")'
                      @blur='onInputBlur("showWorkList")'
                      @change='onchangeWork'/>
                  <ul class='list' v-show='waterWorks.length && showWorkList'>
                    <li v-for='work in waterWorks'
                        data-id='work.factoryId'
                        @click='choseWork(work)'>
                        <p>{{work.name}}</p>
                        <p class='detail'>{{work.detailAddress}}</p>
                    </li>
                  </ul>
              </el-form-item>

              <el-form-item label='上传图片'>
                <upload @getUrl='onGetProductUrl'
                            class='left-img'
                            ref='outsideUrl'
                            style='margin-left: 0px;'
                            :widthScale='1'
                            :heightScale='1'
                            :imgWidth='150'
                            :imgHeight='150'
                            :minSize='0'
                            :maxSize='5'></upload>
              </el-form-item>
              <el-form-item class='btn-group'>
                  <el-button @click='reset("newProForm")'>重置</el-button>
                  <el-button type="primary" @click='submitCusPro("newProForm")' :disabled='hasSubmit'>确定</el-button>
              </el-form-item>
           </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import AddJs from './Add.js';
    module.exports = AddJs;
</script>

<style scoped lang='less'>
  @import url(Add.less);
</style>
